<template>
  <el-dialog
    draggable
    overflow
    :title="'配置工艺'"
    v-model="visible"
    :width="1024"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-width="80px"
      label-position="right"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="工艺线路" prop="process_route_id">
            <el-input v-model="form.main.process_route.name" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线路内容">
            <el-input v-model="form.main.process_route.content" readonly></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="开卡面布" prop="details">
            <sc-VxeTable
              ref="xGrid1"
              :gridEvts="gridEvents"
              :gridOps="gridOps"
              :data="form.details"
              :tablecode="'market_pro_storage_receive_save2'"
            >
            </sc-VxeTable>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="工艺BOM" prop="bom_id">
            <skAutoChoose
              ref="autoBom"
              :asKey="'bom_id'"
              :assign="form"
              v-model="form.bom.name"
              :name="'bom'"
              :placeholder="'请选择bom'"
              :params="getProcessBomCategory"
              @select="bomSelect"
            >
            </skAutoChoose>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="膜/布" prop="material">
            <el-input v-model="search.material"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="棍" prop="pointStick">
            <el-input v-model="search.pointStick"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="胶水" prop="glue">
            <el-input v-model="search.glue"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="BOM明细" prop="raws">
            <sc-VxeTable
              ref="xGrid1"
              :gridEvts="gridEvents"
              :gridOps="gridOpsBom"
              :data="form.raws"
              :tablecode="'market_pro_process_save'"
            >
            </sc-VxeTable>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" v-if="showsave" @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
import skAutodcomplete from "@/components/skAutoComplete";
import skBrowserChoose from "@/components/skBrowserChoose";
export default {
  emits: ["success", "closed"],
  components: { skDicSelect, skAutoChoose, skAutodcomplete, skBrowserChoose },
  data() {
    return {
      gridEvents: {},
      gridOps: { height: 200 },
      gridOpsBom: {
        height: 200,
        columns: [
          {
            field: "material.fullname",
            event: {
              select: ({ e, row }) => {
                row["material"] = e;
              },
            },
          },
        ],
      },
      showsave: true,
      form: {
        main: { process_route: {} },
        details: [],
        raws: [],
        bom: {},
      },
      search: {},
      rules: {
        bom_id: [{ required: true, message: "请选工艺NOM" }],
      },
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {},
  watch: {
    search: {
      handler() {
        this.$refs.autoBom.triggerSelect();
      },
      deep: true,
    },
    "form.process": {
      handler(value) {
        if (value.name != "" && this.form.raws.length == 0)
          this.form.raws =
            value?.details
              .filter(v => {
                return v.process.hasbom_id == 1;
              })
              .map(v => {
                v.process_name = v.rename;
                v.id = "key" + v.id;
                return v;
              }) ?? [];
      },
      deep: true,
    },
    "form.raws": {
      handler(val) {
        let process_names = [];
        this.boms = val.filter(v => {
          if (v.material?.fullname ?? null)
            process_names.push((v.material.fullname ?? "").replace(/\s+/g, ""));
          if (v.point_stick?.name ?? null)
            process_names.push((v.point_stick.name ?? "").replace(/\s+/g, ""));
          if (v.glue?.fullname ?? null)
            process_names.push((v.glue.fullname ?? "").replace(/\s+/g, ""));
        });
        this.form.bom.name = process_names.join("+");
      },
      deep: true,
    },
  },
  methods: {
    open() {
      this.visible = true;
      return this;
    },
    setData(ids) {
      this.getData(ids);
      return this;
    },
    getProcessBomCategory() {
      let params = { craft_category_id: this.form.craft_category_id };
      if (this.search.pointStick && this.search.pointStick.trim() != "") {
        params["details.point_stick.name"] = {
          value: this.search.pointStick,
          type: "lk",
        };
      }
      if (this.form.backing_category_id) {
        params["details.material.category_id"] = this.form.backing_category_id;
      }
      if (this.form.film_category_id) {
        params["details.material.film_category_id"] = this.form.film_category_id;
      }
      if (this.form.material_comp && this.form.material_comp.trim() != "") {
        params["details.material.comp"] = this.form.material_comp;
      }
      if (this.form.material_comp && this.form.material_comp.trim() != "") {
        params["details.material.comp"] = this.form.material_comp;
      }
      if (this.form.material_batch && this.form.material_batch.trim() != "") {
        params["details.material.batch"] = this.form.material_batch;
      }

      if (this.search.material && this.search.material.trim() != "") {
        params["details.material.fullname"] = {
          value: this.search.material.trim(),
          type: "lk",
        };
      }

      if (this.search.glue && this.search.glue.trim() != "") {
        params["details.glue.fullname"] = { value: this.search.glue.trim(), type: "lk" };
      }
      params["status_id"] = { value: 0, type: "eq" };
      return params;
    },
    getData(ids) {
      this.$API.pro.OpenCard.details
        .get({ filter: [{ main_id: { type: "in", value: ids } }] })
        .then(res => {
          Object.assign(
            this.form,
            this.$TOOL.removeNull(this.$TOOL.objCopy(res.data.rows[0]))
          );
          this.form.process.name = "";
          if (this.form.main.raws.length > 0) this.form.raws = this.form.main.raws;
          else {
            this.form.raws =
              this.form.main.process_route.details
                .filter(v => {
                  return v.process.hasbom_id == 1;
                })
                .map(v => {
                  v.process_name = v.rename;
                  v.id = "key" + v.id;
                  v.rate = 105;
                  return v;
                }) ?? [];
          }
          this.form.bom.name = this.form.main.bom?.name ?? "";
          this.form.bom_id = this.form.main.bom_id;
          if (this.form.bom_id > 0) {
            this.showsave = false;
          }
          this.form.details = res.data.rows;
        });
    },
    processSelect(data) {
      this.form.process = data;
    },
    bomSelect(data) {
      this.form.raws = (data.details ?? []).map(v => {
        delete v.id;
        return v;
      });
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.pro.OpenCard.reSetBOM.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          }
        }
      });
    },
  },
};
</script>
